{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="{% static '/js/jquery-3.3.1.js' %}"></script>
    <link type="text/css" rel="stylesheet" href="{% static 'css/basestyle.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}"/>
    <style>
        {% block style %}

        {% endblock style %}
    </style>

    {% block head %}

    {% endblock head %}
</head>
<body>
    <div class="head">
        <ul class="top_ul">
            <li>
                <i style="display: inline-block;margin-right: 5px"><img class="profile" style="vertical-align: middle;margin-bottom: 5px" src="{% static '/img/头像.jpg' %}"></i>
                <span style="font-size: 16px;">欢迎<span style="color: red;">{{ usrname }}</span>登录</span>
                <a href="/login/" style="font-size: 16px;margin-left: 5px;">退出登录</a>
            </li>
        </ul>
    </div>
    <div class="left">
        <ul class="left_ul">
            <li><a class="leftA" id="student" href="/student/1.html/">学生管理</a></li>
            <li><a class="leftA" id="teacher" href="/teacher/1.html/">老师管理</a></li>
            <li><a class="leftA" id="classes" href="/classes/1.html/">班级管理</a></li>
        </ul>
    </div>
    <div class="right">
        <div style="height: 30px;line-height: 30px;margin-top: 20px;">
            <div class="search" style="height: 30px;width: 480px;margin-left: 20%;display: inline-block;">
                <form action="#" method="post">
                    <i class="fa fa-search fa-2x" style="margin-left: 10px;vertical-align: middle;"></i>
                    <input type="text" style="width: 400px;height: 23px;border: solid blue 1px;vertical-align: middle;margin-left: 8px;">
                    <input type="submit" value="搜索" style="vertical-align: middle;height: 23px;border: blue solid 1px;">
                </form>
            </div>
            <div style="display: inline-block;width: 80px;height: 28px;line-height: 28px;background-color: #eeeeee;border-radius: 6px;margin-left: 150px;">
                <a class="add_a" href="/add/{{ addwhich }}/" style="margin-left: 9px;vertical-align: middle;">添加</a>
                <div style="display: inline-block;width: 1px;height: 15px;background-color: darkgray;vertical-align: middle;margin-left: 8px;"></div>
                <a class="add_a" href="/add/{{ addwhich }}/"><i class="fa fa-plus fa-2x" style="vertical-align: middle;margin-left: 8px;"></i></a>
            </div>
        </div>
        {% block right %}

        {% endblock right %}
    </div>

    {#  设置模态页面  #}
    <div class="shade hide"></div>
    <div class="dialog hide">
        <div style="background-color: white;height: 30px;width: 100%;line-height: 30px;">
            <span class="dlg-title"></span>
            <div class="closedlg" style="display: inline-block;float: right"><i class="fa fa-times fa-2x"></i></div>
        </div>
        <div style="width: 100%;text-align: center;margin-top: 40px;margin-left: 10px;">
            <i class="icon"></i>
            <span class="dlg-text"></span>
            {% block dialog %}

            {% endblock dialog %}
        </div>
    </div>
    <script>
        $(".closedlg").click(function () {
            $(".shade").addClass("hide");
            $(".dialog").addClass("hide");
        });
        $(".add_a").click(function (event) {
            event.preventDefault();
            $.post("/add/property/",{csrfmiddlewaretoken: '{{ csrf_token }}'},function (data) {
                if(data==="err"){
                    $(".shade").removeClass("hide");
                    $(".dialog").removeClass("hide");
                    $(".dlg-title").text("提示");
                    $(".icon").addClass(" fa fa-warning fa-lg");
                    $(".dlg-text").text("对不起，您没有操作权限！")
                }
                else {
                    window.location.href="/add/{{ addwhich }}/";
                    $(".icon").removeClass(" fa fa-warning fa-lg");
                    $(".dlg-text").text("")
                }
            })
        });


        {% block js %}

        {% endblock js %}


    </script>
</body>
</html>